<!--
 * @Author: your name
 * @Date: 2021-10-21 10:32:39
 * @LastEditTime: 2021-10-25 13:46:37
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ias_ui\src\views\system-manage\new\index.vue
-->
<template>
  <div v-loading="loading" class="app-container">
    <div class="head-container">
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item name="1">
          <template slot="title"> <i class="el-icon-search" />搜索栏 </template>
          <el-form
            class="searchform"
            :inline="true"
            size="mini"
          >
            <el-form-item label="UPC">
              <el-input
                v-model="resultInfo.upc"
                placeholder="请输入UPC"
                clearable
                style="width: 200px; margin-right: 10px"
                @clear="handleCurrentChange(1)"
              />
              <el-button
                size="mini"
                type="primary"
                style="float: right; margin-right: 0px"
                icon="el-icon-search"
                round
                @click="handleCurrentChange(1)"
              >查询</el-button>
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
    </div>
    <el-table
      border
      size="small "
      style="width: 100%"
      :data="pushResultList"
      stripe
      :span-method="objectSpanMethod"
    >
      <el-table-column align="center" label="ID" prop="id" width="80" />
      <el-table-column align="center" label="UPC" prop="upc" width="120" />
      <el-table-column align="center" label="渠道">
        <template slot-scope="scope">
          {{ scope.row.channelId | getOrderStatus }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="推送结果"
        prop="status"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == '0'">未推送</el-tag>
          <el-tag
            v-else-if="scope.row.status == '1'"
            type="success"
          >推送成功</el-tag>
          <el-tag v-else type="danger">推送失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="说明"
        prop="reason"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        align="center"
        label="推送次数"
        prop="pushTimes"
      />
      <el-table-column
        align="center"
        label="最后推送时间"
        prop="pushDateTime"
      />
    </el-table>

    <el-pagination
      style="margin-top: 8px"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :current-page="resultInfo.pageNum"
      :page-sizes="[5, 20, 30, 40, 50]"
      :page-size="resultInfo.pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { pushResultApi } from '@/api/pushResult'
import moment from 'moment'
export default {
  name: 'PushresultList',
  filters: {
    getOrderStatus(status) {
      switch (status) {
        case '12':
          return '沃尔玛到家'
        case '07':
          return '京东到家'
        case '02':
          return '京东旗舰店'
        default:return ''
      }
    }
  },
  data() {
    return {
      loading: false,
      activeName: '',
      resultInfo: {
        upc: '',
        pageNum: 1,
        pageSize: 5
      },
      pushResultList: [],
      total: 0
    }
  },
  created() {
    this.getPushResultList()
  },
  methods: {
    async getPushResultList() {
      const { result } = await pushResultApi(this.resultInfo)
      console.log(result)
      if (!result) return
      this.pushResultList = result.skuPushDescList || []
      this.total = result.total
      this.pushResultList.forEach((element) => {
        element.pushDateTime =
          element.pushDateTime &&
          moment(element.pushDateTime).format('YYYY-MM-DD HH:mm:ss')
      })
    },
    handleSizeChange(newSize) {
      this.resultInfo.pageSize = newSize
      this.getPushResultList()
    },
    handleCurrentChange(newPage) {
      this.resultInfo.pageNum = newPage
      this.getPushResultList()
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1) {
        if (row.channelCount > 0) {
          return {
            rowspan: row.channelCount,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    }
  }
}
</script>
<style scoped lang="scss">
</style>
